<template>
    <div class="projectDetail">
        <div class="boxTitle">
            <img src="@/assets/images/home/xmmu.png" alt="">
            <span class="title">项目概况</span>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">35<span>天</span></div>
                <div class="l_top_img"></div>
                <span>运行时间</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">46.6<span>吨</span></div>
                <div class="l_top_img"></div>
                <span>入场垃圾总量</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">41.8<span>吨</span></div>
                <div class="l_top_img"></div>
                <span>入炉垃圾量</span>
            </div>
        </div>
        <div class="l_top2">
            <div class="l_top2_1">
                <div class="l_top2_1_title">
                    <img src="@/assets/images/home/fadmld.png" alt="">
                    <span class="title">今日发电量</span>
                </div>
                <div class="l_top2_1_num">
                    <span class="number">135.67</span>
                    <span class="unit">kwh</span>
                </div>
            </div>
            <div class="l_top2_1">
                <div class="l_top2_1_title">
                    <img src="@/assets/images/home/fadmld.png" alt="">
                    <span class="title">累计发电量</span>
                </div>
                <div class="l_top2_1_num">
                    <span class="number">135.67</span>
                    <span class="unit">kwh</span>
                </div>
            </div>
        </div>
        <div class="l_top2">
            <div class="l_top2_1">
                <div class="l_top2_1_title">
                    <img src="@/assets/images/home/fadmld.png" alt="">
                    <span class="title">今日上网电量</span>
                </div>
                <div class="l_top2_1_num">
                    <span class="number">135.67</span>
                    <span class="unit">kwh</span>
                </div>
            </div>
            <div class="l_top2_1">
                <div class="l_top2_1_title">
                    <img src="@/assets/images/home/fadmld.png" alt="">
                    <span class="title">累计上网电量</span>
                </div>
                <div class="l_top2_1_num">
                    <span class="number">135.67</span>
                    <span class="unit">kwh</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.projectDetail {
    transition: transform 0.5s ease;
    position: absolute;
    background-size: 100% 100%;
    z-index: 999;
    padding-left: vh(21);
    padding-right: vh(21);
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    left: vw(20);
    top: vh(61);
    width: vh(422);
    height: vh(314);

    .boxTitle {
        img {
            width: vh(16);
            height: vh(14);
        }
    }

    .l_top {
        display: flex;
        margin-top: vh(21);
        padding-left: vh(14);
        padding-right: vh(14);
        justify-content: space-between;

        .l_top_1 {
            display: flex;
            flex-direction: column;
            align-items: center;

            .l_top_num {
                line-height: vh(18);
                font-size: vh(18);
                font-family: DIN;
                font-weight: 400;
                color: #EDA915;

                span {
                    line-height: vh(11);
                    margin-left: vh(5);
                    font-size: vh(10);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #EDA915;
                }
            }

            .l_top_img {
                text-align: center;
                width: vh(78);
                height: vh(22);
                background: url(@/assets/images/home/zu1.png) no-repeat;
                background-size: 100% 100%;
                margin-bottom: vh(11);
            }

            span {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(12);
                color: #FFFFFF;
            }
        }
    }

    .l_top2 {
        display: flex;
        justify-content: space-between;
        margin-top: vh(20);

        .l_top2_1 {
            width: vh(179);
            height: vh(70);
            background: url(@/assets/images/home/fadm.png) no-repeat;
            background-size: 100% 100%;

            .l_top2_1_title {
                display: flex;
                align-items: center;
                margin-top: vh(7);
                margin-bottom: vh(15);
                padding-left: vh(12);
                height: vh(16);

                img {
                    width: vh(16);
                    height: vh(16);
                    background-size: 100% 100%;
                }

                .title {
                    letter-spacing: 1px;
                    margin-left: vh(9);
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: vh(14);
                    color: #FFFFFF;
                    line-height: vh(16);

                }
            }

            .l_top2_1_num {
                height: vh(17);
                margin-left: vh(39);

                .number {
                    font-family: DIN;
                    font-weight: bold;
                    font-size: vh(22);
                    color: #00E3FE;
                    line-height: vh(22);
                }

                .unit {
                    margin-left: vh(7);
                    font-family: DIN;
                    font-weight: 400;
                    font-size: vh(14);
                    color: #00E3FE;
                    line-height: vh(11);
                }
            }
        }
    }
}
</style>